<template>
	<view class="box">
		<u--form labelPosition="left" labelWidth="auto" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label="项目编号" prop="projectCode" borderBottom ref="item1">
				<u--input v-model="model1.projectCode" disabled border="none" placeholder="自动生成,不用填写"></u--input>
			</u-form-item>
			<u-form-item label="项目名称" prop="projectName" borderBottom>
				<u--input v-model="model1.projectName" placeholder="请输入项目名称" border="none"></u--input>
			</u-form-item>
			<u-form-item label="申请单位" prop="unit" borderBottom ref="item1">
				<u--input v-model="model1.unit" border="none" placeholder="请输入申请单位"></u--input>
			</u-form-item>
			<u-form-item label="项目联系人" prop="callman" borderBottom ref="item1">
				<u--input v-model="model1.callman" border="none" placeholder="请输入项目联系人"></u--input>
			</u-form-item>
			<u-form-item label="联系人电话" prop="telephone" borderBottom ref="item1">
				<u--input v-model="model1.telephone" border="none" placeholder="请输入联系人电话"></u--input>
			</u-form-item>
			<u-form-item label="所属区域" prop="area" borderBottom ref="item1" @click="showPicker = true">
				<u--input v-model="model1.areaName" disabled border="none" disabledColor="#ffffff" placeholder="请选择所属区域"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="总投资(万元)" prop="investment" borderBottom ref="item1">
				<u--input v-model="model1.investment" border="none" placeholder="请输入总投资"></u--input>
			</u-form-item>
			<u-form-item label="拟申请资金(万元)" prop="fund" borderBottom ref="item1">
				<u--input v-model="model1.fund" border="none" placeholder="请输入拟申请资金"></u--input>
			</u-form-item>
			<u-form-item label="实施年限(开始)" prop="startYear" borderBottom ref="item1" @click="chooseDate('startYear')">
				<u--input v-model="model1.startYear" border="none" disabled disabledColor="#ffffff" placeholder="请选择实施年限(开始)"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="实施年限(结束)" prop="endYear" borderBottom ref="item1" @click="chooseDate('endYear')">
				<u--input v-model="model1.endYear" border="none" disabled disabledColor="#ffffff" placeholder="请选择实施年限(结束)"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="主要研究内容及创新点" prop="zynr" ref="item1">
				<u--textarea v-model="model1.zynr" autoHeight border="none" placeholder="请输入主要研究内容及创新点"></u--textarea>
			</u-form-item>
		</u--form>
		<u-row customStyle="padding-top: 20rpx;">
			<u-button text="保存" type="primary" @click="submit"></u-button>
		</u-row>
		<u-datetime-picker :show="showDatePicker" v-model="datePickerValue" mode="year-month" @cancel="cancelDatePicker" @confirm="confirmDatePicker"></u-datetime-picker>
		<u-picker :show="showPicker" :columns="columns" keyName="name" @cancel="cancelPicker" @confirm="confirmPicker"></u-picker>
	</view>
</template>

<script>
import * as mydata from '@/api/system/dict/data.js';
import * as kcjj from '@/api/source/project/KCJJ.js';
import * as district from '@/api/system/district.js';
function getDate(number) {
	const date = new Date(number);

	let year = date.getFullYear();
	let month = String(date.getMonth() + 1).padStart(2, 0);

	return `${year}-${month}`;
}

export default {
	data() {
		return {
			model1: {
				id: undefined,
				projectName: undefined,
				unit: undefined,
				industry: undefined,
				zynr: undefined,
				callman: undefined,
				startYear: undefined,
				endYear: undefined,
				investment: undefined,
				area: undefined,
				fund: undefined,
				telephone: undefined
			},
			rules: {
				id: [{ required: true, message: '唯一标识不能为空', trigger: 'blur' }],
				projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
				unit: [{ required: true, message: '申请单位不能为空', trigger: 'blur' }],
				industry: [{ required: true, message: '技术领域不能为空', trigger: 'blur' }],
				zynr: [
					{
						required: true,
						message: '主要研究内容及创新点不能为空',
						trigger: 'blur'
					}
				],
				callman: [{ required: true, message: '项目联系人不能为空', trigger: 'blur' }],
				startYear: [{ required: true, message: '开始日期不能为空', trigger: 'blur' }],
				endYear: [{ required: true, message: '结束日期不能为空', trigger: 'blur' }],
				investment: [{ required: true, message: '总投资不能为空', trigger: 'blur' }],
				area: [{ required: true, message: '所属区域不能为空', trigger: 'blur' }],
				fund: [{ required: true, message: '拟申请基金不能为空', trigger: 'blur' }],
				telephone: [{ required: true, message: '联系人电话不能为空', trigger: 'blur' }]
			},
			showDatePicker: false,
			datePickerValue: Number(new Date()),
			activeDate: '',
			showPicker: false,
			columns: [[]]
		};
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(option) {
		this.model1.projectId = option.id;
		this.getUser();
		this.getArea();
	},
	methods: {
		submit() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					kcjj.addKCJJ(this.model1).then((response) => {
						uni.$u.toast('操作成功');
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
					});
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
		},
		getArea() {
			district.findbyparentid('6103').then((res) => {
				this.columns = []
				this.columns.push(res.data)
			});
		},
		chooseDate(flag) {
			this.showDatePicker = true;
			this.activeDate = flag;
		},
		confirmPicker(item) {
			this.showPicker = false;
			this.model1.area = item.value[0].id;
			this.model1.areaName = item.value[0].name;
		},
		cancelPicker() {
			this.showPicker = false;
		},
		confirmDatePicker(value) {
			this.showDatePicker = false;
			this.model1[this.activeDate] = getDate(value.value);
		},
		cancelDatePicker() {
			this.showDatePicker = false;
		},
		getUser() {
			const value = uni.getStorageSync('userInfo') || [];
			if (value.login_user == null) {
				uni.redirectTo({
					url: '/subpages/pages/register/login_province'
				});
				uni.showToast({
					icon: 'none',
					title: '请先登录！'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	padding: 20rpx;
}
</style>
